<template>
  <div class="background-processor">
    <styled-uploader
        v-if="!value"
        @success="onImageUploaded"
    >
    </styled-uploader>
    <image-processor
        v-else
        :value="value"
        @change="handleUploadUrl"
        :showDelete="true"
    >
    </image-processor>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import StyledUploader from "@/components/StyledUploader.vue";
import ImageProcessor from "@/components/ImageProcessor.vue";
import {RespUploadData} from "@/types/respTypes.ts";

export default defineComponent({
  name: "BackgroundProcessor",
  components: {
    StyledUploader,
    ImageProcessor,
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  setup(props, ctx) {
    const onImageUploaded = (data: { resp: RespUploadData; file: File }) => {
      const reader = new FileReader();
      reader.readAsDataURL(data.file);
      reader.onload = () => {
        ctx.emit('change', reader.result)
      };
    }
    const handleUploadUrl = (data: any) => {
      ctx.emit('change', data)
    }
    return {
      onImageUploaded,
      handleUploadUrl
    }
  },
})
</script>

<style scoped>

</style>